<template>

    <div class="homePage">
    
        <Header class="w" :uname="username"></Header>

        <nav class="navBanner">

            <div class="bannerBg">
                <div class="bannerContent w">
                    <div class="bannerNav">
                        <ul>
                            <li><a href="#">前端开发</a></li>
                            <li><a href="#">后端开发</a></li>
                            <li><a href="#">移动开发</a></li>
                            <li><a href="#">人工智能</a></li>
                            <li><a href="#">商业预测</a></li>
                            <li><a href="#">云计算&大数据</a></li>
                            <li><a href="#">运维&从测试</a></li>
                            <li><a href="#">UI设计</a></li>
                            <li><a href="#">产品</a></li>
                        </ul>
                    </div>
                    <div class="bannerCarousel">
                        <el-carousel height="420px" arrow="never" :interval="intervalTime">
                            <el-carousel-item v-for="(item, index) in carouselUrl" :key="index">
                                <!-- 图片路径需使用require() -->
                                <img :src="item" alt="图片错误" />
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                    <div class="bannerMyclass">
                        <div class="myclassHeadline">我的课程表</div>
                        <div class="myclassContent">
                            <ul>
                                <li><a href="#"><span class="myclassText1">继续学习</span> <span class="myclassText2">程序语言设计</span><br><span class="myclassText3">正在学习-使用对象</span></a></li>
                                <li><a href="#"><span class="myclassText1">继续学习</span> <span class="myclassText2">程序语言设计</span><br><span class="myclassText3">正在学习-使用对象</span></a></li>
                                <li><a href="#"><span class="myclassText1">继续学习</span> <span class="myclassText2">程序语言设计</span><br><span class="myclassText3">正在学习-使用对象</span></a></li>
                            </ul>
                        </div>
                        <button>全部课程</button>
                    </div>
                </div>
            </div>

        </nav>

        <nav class="recomBar w">
            <div class="recomSlogan">精品推荐</div>
            <div class="recomContent">
                <ul>
                    <li v-for="(item, index) in courseTypeInfo" :key="index">
                        <span>|</span><a href="#">{{item.name}}</a>
                    </li>
                </ul>
            </div>
            <div class="recomChange" @click="getCourseTypeInfo">修改兴趣</div>
        </nav>

        <section class="recomSection">
            <div class="recomTitle"></div>
            <div class="recomShow"></div>
            <div class="recomVideo">
                
            </div>
        </section>

    </div>

</template>

<style scoped>

    * {
        margin: 0;
        padding: 0;
    }

    li {
        list-style: none;
    }

    .homePage {
        height: 1600px;
        background-color: #f3f5f7;
        overflow: hidden;
    }

    .w {
        width: 1200px;
        margin: auto;
    }

    /* .homePage .bannerBg {
        height: 420px;
        background-color: #1c036c;
    } */

    .homePage .bannerContent {
        position: relative;
        height: 420px;
        z-index: 0;
    }

    .homePage .bannerContent .bannerNav {
        float: left;
        width: 190px;
        height: 420px;
        background-color: #13014b;
        background: rgba(0,0,0,.3);
        z-index: 1;
    }

    .homePage .bannerContent .bannerNav ul li {
        position: relative;
        top: 25px;
    }

    .homePage .bannerContent .bannerNav ul li a {
        display: block;
        padding-left: 20px;
        line-height: 40px;
        width: 170px;
        height: 40px;
        color: white;
        font-size: 14px;
    }

    .homePage .bannerContent .bannerNav ul li a:hover {
        color: #00a4ff;
    }

    .homePage .bannerContent .bannerCarousel {
        height: 420px;
        width: 1200px;
        position: absolute;
        z-index: -1;
    }

    .homePage .bannerContent .bannerCarousel el-carousel {
        height: 420px;
        width: 1200px;
    }

    .homePage .bannerContent .bannerCarousel .el-carousel .is-animating {
        transition: transform 1.3s ease-in-out;
    }

    .homePage .bannerContent .bannerMyclass {
        float: left;
        position: fixed;
        left: 1600px;
        top: 160px;
        width: 230px;
        height: 302px;
        background-color: white;
        z-index: 1;
    }

    .homePage .bannerContent .bannerMyclass .myclassHeadline {
        height: 50px;
        line-height: 50px;
        background-color: #9bceea;
        color: white;
        font-size: 18px;
        font-weight: 800;
        letter-spacing: .1em;
        text-align: center;
    }

    .homePage .bannerContent .bannerMyclass .myclassContent {
        height: 195px;
        width: 192px;
        margin: 0 auto;
    }

    .homePage .bannerContent .bannerMyclass .myclassContent ul li a {
        display: block;
        position: relative;
        top: 10px;
        height: 60px;
        border-bottom: 2px solid #eaeaea;
        text-align: center;
    }

    .homePage .bannerContent .bannerMyclass .myclassContent ul li a:hover {
        color: #00a4ff;
    }

    .homePage .bannerContent .bannerMyclass .myclassContent .myclassText1 {
        position: relative;
        top: 9px;
        color: #272222;
        font-size: 17px;
        font-weight: 500;
    }

    .homePage .bannerContent .bannerMyclass .myclassContent .myclassText2 {
        position: relative;
        top: 9px;
        color: #272222;
        font-size: 15px;
        font-weight: 500;
    }

    .homePage .bannerContent .bannerMyclass .myclassContent .myclassText3 {
        position: relative;
        top: 9px;
        color: #a5a5a5;
        font-size: 14px;
    }

    .homePage .bannerContent .bannerMyclass button {
        display: block;
        position: relative;
        top: 6px;
        margin: 0 auto;
        width: 196px;
        height: 36px;
        background-color: #fff;
        border: 2px solid #22b0ff;
        font-size: 15px;
        cursor: pointer;
    }

    .homePage .bannerContent .bannerMyclass button:focus {
        outline: none;
    }

    .homePage .recomBar {
        margin-top: 10px;
        margin-bottom: 20px;
        height: 60px;
        background-color: #fff;
        line-height: 60px;
        box-shadow: 0 2px 1px 1px rgba(0,0,0,.1);
    }

    .homePage .recomBar .recomSlogan {
        float: left;
        width: 132px;
        color: #00a4ff;
        font-size: 16px;
        font-weight: 600;
        text-align: center;
    }

    .homePage .recomBar .recomContent ul li a {
        display: block;
        float: left;
        padding: 0 36px;
        color: black;
        font-size: 16px;
        font-weight: 500;
    }

    .homePage .recomBar .recomContent ul li span {
        float: left;
    }

    .homePage .recomBar .recomChange {
        float: left;
        padding: 0 28px;
        margin-left: 10px;
        color: #00a4ff;
        text-align: center;
        font-size: 14px;
        cursor: pointer;
    }

</style>

<script>

    import Header from '../components/Header.vue'
    import config from '../config'

    export default {
        data() {
            return {
                courseTypeInfo: {},
                username: '',
                intervalTime: 7000,
                carouselUrl: [
                    require('../../public/pic/banner2-1.jpg'),
                    require('../../public/pic/banner2-2.jpg'),
                    require('../../public/pic/banner2-3.jpg'),
                ]
            }
        },
        mounted() {
            this.getCourseTypeInfo()
            this.username = this.$store.getters.getUsername
        },
        methods: {
            getCourseTypeInfo() {
                this.$http.get(config.baseURL+'course/showCourseType').then(res => {
                    let randomArr = this.getRandomArray()
                    let courseTypeInfo1 = res.data.courseTypeInfo
                    let courseTypeInfo0 = []
                    for(let i=0;i<randomArr.length;i++) {
                        courseTypeInfo0.push(courseTypeInfo1[randomArr[i]])
                    }
                    this.courseTypeInfo = courseTypeInfo0
                })
            },
            getRandomArray() {
                let arr = [];
                for(let i=0;i<10;i++) arr.push(i);
                for(let i=0;i<3;i++) {
                    arr.splice(Math.floor(Math.random()*(10-i)), 1);
                }
                return arr;
            }
        },
        components: {
            Header
        }
    }

</script>